<template>
  <div>
    <GapedColumn width="100%">
      <span>搜索类型</span>
      <GapedRow width="100%">
        <el-select
          v-model="selectedOption"
          placeholder="请选择"
          style="width: 150px"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-select
          v-model="selectedField"
          placeholder="请选择字段"
          style="width: 200px"
        >
          <el-option
            v-for="field in selectedCategoryFields"
            :key="field.name"
            :label="field.label"
            :value="field"
          />
        </el-select>
        <el-button type="primary" @click="onAddField">添加字段</el-button>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </GapedRow>
      <el-form :model="form">
        <GapedRow>
          <div v-for="field in selectedFields" :key="field.name">
            <FieldItem :field="field" :form="form" @delete="onDeleteField" />
          </div>
        </GapedRow>
      </el-form>
    </GapedColumn>
    <!-- 新增查询按钮 -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, reactive, onMounted } from 'vue'
import FieldItem from './FieldItem.vue'
import { Section, GapedColumn, GapedRow } from '@/core/components'

const categoryOptions = [
  {
    category: '服务器',
    fields: [
      {
        name: 'ipAddress',
        label: 'ipAddress',
        type: 'string',
      },
    ],
  },
  {
    category: '应用',
    fields: [
      {
        name: 'appName',
        label: '应用名称',
        type: 'string',
      },
    ],
  },
  {
    category: '交换机',
    fields: [
      {
        name: 'switchName',
        label: '交换机名称',
        type: 'string',
      },
    ],
  },
]

const selectedOption = ref('')
const selectedField = ref(null)
const selectedFields = ref([])
const options = computed(() => categoryOptions.map(item => item.category))

// 添加一个ref变量，用于存储被选中的option所对应的fields
const selectedCategoryFields = ref([])

// 监听selectedOption的变化，更新selectedCategoryFields
watch(selectedOption, newOption => {
  const category = categoryOptions.find(item => item.category === newOption)
  if (category) {
    selectedCategoryFields.value = category.fields
  } else {
    selectedCategoryFields.value = []
  }
})

const form = reactive({})

// 从localStorage加载保存的表单数据
const loadFormFromLocalStorage = () => {
  const savedForm = localStorage.getItem('searchForm')
  if (savedForm) {
    const parsedForm = JSON.parse(savedForm)
    Object.assign(form, parsedForm.form)
    selectedFields.value = parsedForm.selectedFields
    selectedOption.value = parsedForm.selectedOption
  }
}

// 保存表单数据到localStorage
const saveFormToLocalStorage = () => {
  const formData = {
    form: { ...form },
    selectedFields: [...selectedFields.value],
    selectedOption: selectedOption.value,
  }
  localStorage.setItem('searchForm', JSON.stringify(formData))
}

onMounted(() => {
  loadFormFromLocalStorage()
})

const onAddField = () => {
  if (
    selectedField.value &&
    !selectedFields.value.some(f => f.name === selectedField.value.name)
  ) {
    selectedFields.value.push(selectedField.value)
    form[selectedField.value.name] = ''
    saveFormToLocalStorage()
  }
}

const onDeleteField = field => {
  selectedFields.value = selectedFields.value.filter(f => f.name !== field.name)
  delete form[field.name]
  saveFormToLocalStorage()
}

const onSearch = () => {
  saveFormToLocalStorage()
}
</script>
